import React, {JSX} from 'react';
import {
  View,
  TouchableOpacity,
  Image,
  ImageSourcePropType,
  StyleSheet,
} from 'react-native';
import {BasicText} from '../../../kit/text';
import NumberTag from './NumberTag';
import LinearGradient from 'react-native-linear-gradient';
import {normalize} from '../../../utils/adapter';

export const enum STATUS {
  '去领取' = '去领取',
  '进行中' = '进行中',
  '去完成' = '去完成',
  '已完成' = '已完成',
}

type Props = {
  icon: ImageSourcePropType;
  title: string;
  subTitle: string;
  goldCoin: number;
  status: STATUS;
};

const DailyTask = function ({
  icon,
  title,
  subTitle,
  goldCoin,
  status,
}: Props): JSX.Element {
  return (
    <View style={styles.daily_task_container}>
      <View style={styles.btn_container}>
        <Image source={icon} style={styles.image} />
      </View>
      <View style={{flex: 1}}>
        <View style={styles.last_row}>
          <View style={styles.last_col}>
            <BasicText color="#333">{title}</BasicText>
            <NumberTag num={goldCoin} />
          </View>
          <View>
            <BasicText
              color="#999999"
              fontSize={normalize(10)}
              fontWeight={'medium'}>
              {subTitle}
            </BasicText>
          </View>
        </View>
      </View>
      <View style={styles.btn_container}>
        <LinearGradient colors={['#FF7A41', '#FF6261']} style={styles.btn}>
          <TouchableOpacity>
            <BasicText color="#fff" fontSize={normalize(12)} fontWeight={'400'}>
              {status}
            </BasicText>
          </TouchableOpacity>
        </LinearGradient>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  daily_task_container: {
    flexDirection: 'row',
    paddingVertical: 16,
    paddingHorizontal: 12,
    borderBottomWidth: 1,
    borderColor: '#E5E5E5',
    borderStyle: 'solid',
  },
  image: {
    width: 32,
    height: 32,
  },
  last_row: {
    marginLeft: 10,
  },
  last_col: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  btn_container: {
    justifyContent: 'center',
  },
  btn: {
    width: 66,
    height: 30,
    borderRadius: 26,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default React.memo(DailyTask);
